<template>
  <div class="msgRoom">
    <div class="msg_container" ref="msgContent">
      <div
        :class="{'rightmsg_content':item.LeftOrRight,'leftmsg_content':!item.LeftOrRight}"
        v-for="(item,index) in mMsg"
        :key="index"
      >
        <el-avatar size="medium" :src="imgUrl" v-show="!item.LeftOrRight"></el-avatar>
        <div>
          <span class="text">{{item.content}}</span>
          <div class="date">{{item.date}}</div>
        </div>
        <el-avatar size="medium" :src="mimgUrl" v-show="item.LeftOrRight"></el-avatar>
      </div>
      <i class="el-icon-loading" v-if="isLoad" style="font-size:40px;margin:130px 200px;"></i>
    </div>
    <el-divider></el-divider>
    <div class="inputBox">
      <el-input
        type="textarea"
        placeholder="请输入内容"
        v-model="contents"
        maxlength="200"
        show-word-limit
        style="width:100%;"
        rows="3"
      ></el-input>
      <el-button
        type="primary"
        style="margin-left:auto;margin-top:10px;"
        size="mini"
        :disabled="sendBtn"
        @click="sendContent()"
      >发送</el-button>
    </div>
  </div>
</template>
<script>
export default {
  props: ['msgName'],
  data() {
    return {
      msg: {
        name: [],
        date: ''
      },
      username: '',
      contents: '',
      sendBtn: true, // 发送按钮的disabled
      mMsg: [], // 我的消息
      imgUrl: '', // 他的头像
      isLoad: true,
      mimgUrl: '' // 我的头像
    }
  },
  created() {
    this.username = window.sessionStorage.getItem('login')
  },
  methods: {
    // 创建空间
    async setupRoom() {
      this.msg.name.push(this.msgName)
      this.msg.name.push(this.username)
      const findRes = await this.$http.post('/getupRoom', {
        name: { $all: this.msg.name }
      })
      if (findRes.data.length) {
        return
      }
      this.msg.date = this.comm.timeFilter()
      const addRes = await this.$http.post('/setupRoom', this.msg)
      if (addRes.meta.status !== 200) {
        return this.$Message.error('创建空间失败')
      }
      this.$Message.success('创建空间成功')
    },
    // 获取消息
    async getContent() {
      const getRes = await this.$http.post('/getContent', {
        name: this.msg.name
      })
      if (getRes.meta.status !== 200) {
        return this.$Message.error('error')
      }
      // this.$Message.success('ok')
      var msg = getRes.data.msg
      // console.log(this.mMsg)
      for (let i = 0; i < msg.length; i++) {
        if (msg[i].name === this.username) {
          msg[i].LeftOrRight = true
        } else {
          msg[i].LeftOrRight = false
        }
      }
      this.mMsg = msg
      // console.log(this.mMsg)
    },
    // 发送按钮
    async sendContent() {
      const sendRes = await this.$http.post('/sendContent', {
        option: this.msg.name,
        msg: {
          name: this.username,
          content: this.contents,
          date: this.comm.timeFilter(),
          isread: 0
        }
      })
      // 将本空间消息的未读改为已读
      this.comm.noticeRead(this.msg.name[0], 0, 'msg', 'msg', 0, this)
      if (sendRes.meta.status !== 200) {
        return this.$Message.error('发送失败')
      }
      // this.$Message.success('发送成功')
      this.contents = ''
      this.getContent()
    }
  },
  mounted() {
    this.comm.getuserImg(this.username, this).then(data => {
      // 获取头像
      this.mimgUrl = data
    })
    this.setupRoom().then(() => {
      this.isLoad = false
      // 创建空间
      this.getContent().then(() => {
        // 获取消息
        this.comm.getuserImg(this.msgName, this).then(datas => {
          this.imgUrl = datas
        })
      })
    })
  },
  watch: {
    // 监控文本框的内容，改变按钮的disabled
    contents: function(val) {
      // console.log(val)
      if (val.trim().length) {
        this.sendBtn = false
      } else {
        this.sendBtn = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.msgRoom {
  height: 100%;
  .header {
    display: flex;
  }
  .msg_container::-webkit-scrollbar {
    display: none;
  }
  .msg_container {
    overflow: auto;
    overflow-x: hidden;
    width: 100%;
    height: 354px;
    .leftmsg_content {
      height: 50px;
      display: flex;
      align-items: center;
      padding: 15px 0 0 20px;
      > div {
        margin-left: 5px;
        height: 100%;
        .text {
          display: inline-block;
          max-width: 100px;
          margin-top: 4px;
          padding: 5px;
          font-size: 13px;
          color: #fff;
          border-radius: 10px;
          background: #007ceb;
        }
        .date {
          margin-top: 5px;
          font-size: 11px;
          color: #999;
        }
      }
    }
    .rightmsg_content {
      height: 50px;
      display: flex;
      justify-content: center;
      padding: 15px 20px 0 0;
      > div {
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-left: auto;
        .text {
          margin-left: auto;
          margin-right: 5px;
          display: inline-block;
          max-width: 100px;
          margin-top: 4px;
          padding: 5px;
          font-size: 13px;
          color: #fff;
          border-radius: 10px;
          background: #007ceb;
        }
        .date {
          margin-top: 5px;
          font-size: 11px;
          color: #999;
        }
      }
    }
  }
  .inputBox {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
  }
}
.el-divider--horizontal {
  margin: 10px 0;
}
</style>
